<template>
  <div class="all-detail">
    <div class="box1">
      <echarts2 id="echarts1" :option="option1" :styles="styles1"></echarts2>
    </div>
    <div class="box2">
      <echarts2 id="echarts2" :option="option2" :styles="styles1"></echarts2>
    </div>
    <div class="box2">
      <echarts2 id="echarts3" :option="option3" :styles="styles1"></echarts2>
    </div>
    <!-- <echarts id="echarts1" :option="option1" :styles="styles1"></echarts> -->
    <!-- <div id="echars2" :style="styles1"></div> -->
  </div>
</template>

<script>
import echarts from "echarts";
import echarts2 from "@/components/echarts.vue";

export default {
  name: "JinDu",
  props: {
    select: {
      type: Number,
      default: 1
    }
  },
  data() {
    var colors = ["#7cf317", "#d10eb1", "#4ddbff"];
    return {
      styles1: {
        width: "100%",
        height: "100%",
        margin: "0 auto"
      },
      option1: {
        barWidth: 10,
        // barGap:'80%',
        xAxis: {
          type: "category",
          data: ["安全教育", "转发分享", "现场扫码", "系统推送"],
          // 去掉y轴坐标线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          }
        },

        series: [
          {
            type: "bar",
            data: [600, 900, 1100, 700],
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#39FBA4"
                  },
                  {
                    offset: 1,
                    color: "#27E0F7"
                  }
                ])
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ],
        // 设置图标的位置
        grid: {
          x: 50,
          x2: 40,
          // y:10,
          y2: 80,
          containLabel: true
        }
      },

      // 第二个
      option2: {
        barWidth: 10,
        // barGap:'80%',
        // "splitLine": {     //网格线
        //   "show": false
        // },
        xAxis: {
          // show : false,
          boundaryGap: false,
          type: "category",
          data: [
            "2019.1",
            "2019.2",
            "2019.3",
            "2019.4",
            "2019.5",
            "2019.6",
            "2019.7"
          ],
          axisTick: {
            show: false
          },
          // position: 'b',
          // 去掉y轴坐标线
          axisLine: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          }
        },
        legend: {
          icon: "roundRect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 20, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 20, // 设置间距
          top: 20,
          data: ["全部隐患", "安全隐患", "质量隐患", "重大隐患"]
        },
        series: [
          {
            name: "全部隐患",
            type: "line",
            data: [600, 900, 1100, 700, 200, 500, 900],
            symbol: "circle", //折点设定为实心点
            symbolSize: 8,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#00A0E9",
                lineStyle: {
                  color: "#00A0E9" //折线颜色
                }
              }
            }
          },
          {
            name: "安全隐患",
            type: "line",
            data: [30, 1100, 200, 900, 1100, 400, 300],
            symbol: "circle", //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#ffff00",
                lineStyle: {
                  color: "#ffff00" //折线颜色
                }
              }
            }
          },
          {
            name: "质量隐患",
            type: "line",
            data: [60, 700, 400, 800, 100, 700, 1100],
            symbol: "circle", //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#80c269",
                lineStyle: {
                  color: "#80c269" //折线颜色
                }
              }
            }
          },
          {
            name: "重大隐患",
            type: "line",
            data: [300, 100, 900, 500, 800, 200, 400],
            symbol: "circle", //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#6461fc",
                lineStyle: {
                  color: "#6461fc" //折线颜色
                }
              }
            }
          }
        ],
        // 设置图标的位置
        grid: {
          x: 50,
          x2: 20,
          // y:10,
          y2: 40,
          containLabel: true
        },
        yAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            // #0d1b4b
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ]
      },

      // 第三个
      option3: {
        barWidth: 10,
        // barGap:'80%',
        yAxis: {
          type: "category",
          show: true,
          // 去掉y轴坐标线
          data: ["安全教育", "安全教育2"],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          }
        },

        series: [
          {
            name: "隐患",
            type: "bar",
            data: [600, 890],
            itemStyle: {
              normal: {
                // normal:{
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                // color: function (params){
                //     var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                //     return colorList[params.dataIndex];
                // }
                barBorderRadius: [0, 10, 10, 0],
                color: function(params) {
                  let colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#39FBA4"
                      },
                      {
                        offset: 1,
                        color: "#27E0F7"
                      }
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#90FBA4"
                      },
                      {
                        offset: 1,
                        color: "red"
                      }
                    ])
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            // data: ["苹果","小米","华为","其他"] ,
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ]
      },
      option4: {
        xAxis: {
          // data: ["苹果","小米","华为","其他"]
        },
        yAxis: {
          splitLine: { show: false }, //改设置不显示坐标区域内的y轴分割线
          data: ["苹果", "小米", "华为", "其他"]
        },
        series: [
          {
            name: "手机品牌",
            type: "bar",
            data: [19, 15, 40, 32],
            //设置柱子的宽度
            barWidth: 30,
            //配置样式
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  var colorList = [
                    "rgb(164,205,238)",
                    "rgb(42,170,227)",
                    "rgb(25,46,94)",
                    "rgb(195,229,235)"
                  ];
                  return colorList[params.dataIndex];
                }
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ], //控制边距
        grid: {
          left: "0%",
          right: "10%",
          containLabel: true
        }
      }
    };
  },
  components: {
    echarts2
  }
};
</script>
<style lang="scss">
.all-detail {
  width: 600px;
  height: 400px;
  .box1 {
    // background: pink;
    width: 600px;
    height: 400px;
  }
  .box2 {
    background: pink;
    width: 600px;
    height: 100px;
    margin-top: 20px;
  }
}
</style>